<template>
  <view class="profile-page">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-avatar">
        <text class="avatar-text">👤</text>
      </view>
      <view class="user-info">
        <text class="user-name">健康用户</text>
        <text class="user-id">ID: 123456789</text>
      </view>
      <!-- Removed settings button -->
    </view>

    <!-- 健康数据快速录入 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">健康数据录入</text>
      </view>

      <view class="data-input-grid">
        <!-- 身高体重 -->
        <view class="input-card" @tap="showHeightWeightModal">
          <view class="input-icon">📏</view>
          <view class="input-content">
            <text class="input-label">身高体重</text>
            <text class="input-value">{{ height }}cm / {{ weight }}kg</text>
          </view>
          <text class="arrow">›</text>
        </view>

        <!-- 步数 -->
        <view class="input-card" @tap="showStepsModal">
          <view class="input-icon">🚶</view>
          <view class="input-content">
            <text class="input-label">今日步数</text>
            <text class="input-value">{{ steps }} 步</text>
          </view>
          <text class="arrow">›</text>
        </view>

        <!-- 睡眠时间 -->
        <view class="input-card" @tap="showSleepModal">
          <view class="input-icon">😴</view>
          <view class="input-content">
            <text class="input-label">睡眠时间</text>
            <text class="input-value">{{ sleepHours }} 小时</text>
          </view>
          <text class="arrow">›</text>
        </view>
      </view>
    </view>

    <!-- 我的记录 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">我的记录</text>
      </view>

      <view class="menu-list">
        <!-- 病例记录 -->
        <view class="menu-item" @tap="goToMedicalRecords">
          <view class="menu-icon-wrapper blue">
            <text class="menu-icon">📋</text>
          </view>
          <view class="menu-content">
            <text class="menu-title">我的病例</text>
            <text class="menu-subtitle">{{ medicalRecords.length }} 条记录</text>
          </view>
          <text class="menu-arrow">›</text>
        </view>

        <!-- 药品记录 -->
        <view class="menu-item" @tap="goToMedicineRecords">
          <view class="menu-icon-wrapper purple">
            <text class="menu-icon">💊</text>
          </view>
          <view class="menu-content">
            <text class="menu-title">药品记录</text>
            <text class="menu-subtitle">{{ medicineRecords.length }} 种药品</text>
          </view>
          <text class="menu-arrow">›</text>
        </view>

        <!-- Removed diet records menu item -->

        <!-- 健康报告 -->
        <view class="menu-item" @tap="goToHealthReports">
          <view class="menu-icon-wrapper orange">
            <text class="menu-icon">📊</text>
          </view>
          <view class="menu-content">
            <text class="menu-title">健康报告</text>
            <text class="menu-subtitle">查看健康报告</text>
          </view>
          <text class="menu-arrow">›</text>
        </view>
      </view>
    </view>

    <!-- 更多功能 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">更多功能</text>
      </view>

      <view class="menu-list">
        <view class="menu-item" @tap="goToReminders">
          <view class="menu-icon-wrapper yellow">
            <text class="menu-icon">⏰</text>
          </view>
          <view class="menu-content">
            <text class="menu-title">用药提醒</text>
            <text class="menu-subtitle">设置用药提醒</text>
          </view>
          <text class="menu-arrow">›</text>
        </view>

        <view class="menu-item" @tap="goToExport">
          <view class="menu-icon-wrapper red">
            <text class="menu-icon">📤</text>
          </view>
          <view class="menu-content">
            <text class="menu-title">数据导出</text>
            <text class="menu-subtitle">导出健康数据</text>
          </view>
          <text class="menu-arrow">›</text>
        </view>
      </view>
    </view>

    <!-- 身高体重输入弹窗 -->
    <view v-if="showHeightWeight" class="modal-overlay" @tap="closeHeightWeightModal">
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">录入身高体重</text>
          <view class="modal-close" @tap="closeHeightWeightModal">
            <text>✕</text>
          </view>
        </view>
        <view class="modal-body">
          <view class="input-group">
            <text class="input-label-text">身高 (cm)</text>
            <input v-model="tempHeight" type="number" class="modal-input" placeholder="请输入身高" />
          </view>
          <view class="input-group">
            <text class="input-label-text">体重 (kg)</text>
            <input v-model="tempWeight" type="number" class="modal-input" placeholder="请输入体重" />
          </view>
          <view class="bmi-info" v-if="tempHeight && tempWeight">
            <text class="bmi-label">BMI指数：</text>
            <text class="bmi-value">{{ calculateBMI() }}</text>
            <text class="bmi-status" :class="getBMIStatus()">{{ getBMIStatusText() }}</text>
          </view>
        </view>
        <view class="modal-footer">
          <view class="modal-btn cancel" @tap="closeHeightWeightModal">
            <text class="btn-text">取消</text>
          </view>
          <view class="modal-btn confirm" @tap="saveHeightWeight">
            <text class="btn-text">保存</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 步数输入弹窗 -->
    <view v-if="showSteps" class="modal-overlay" @tap="closeStepsModal">
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">录入今日步数</text>
          <view class="modal-close" @tap="closeStepsModal">
            <text>✕</text>
          </view>
        </view>
        <view class="modal-body">
          <view class="input-group">
            <text class="input-label-text">步数</text>
            <input v-model="tempSteps" type="number" class="modal-input" placeholder="请输入今日步数" />
          </view>
          <view class="steps-tips">
            <text class="tips-text">建议每天步行10,000步以上</text>
          </view>
        </view>
        <view class="modal-footer">
          <view class="modal-btn cancel" @tap="closeStepsModal">
            <text class="btn-text">取消</text>
          </view>
          <view class="modal-btn confirm" @tap="saveSteps">
            <text class="btn-text">保存</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 睡眠时间输入弹窗 -->
    <view v-if="showSleep" class="modal-overlay" @tap="closeSleepModal">
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">录入睡眠时间</text>
          <view class="modal-close" @tap="closeSleepModal">
            <text>✕</text>
          </view>
        </view>
        <view class="modal-body">
          <view class="input-group">
            <text class="input-label-text">睡眠时长 (小时)</text>
            <input v-model="tempSleepHours" type="number" class="modal-input" placeholder="请输入睡眠时长" />
          </view>
          <view class="sleep-tips">
            <text class="tips-text">建议每天睡眠7-9小时</text>
          </view>
        </view>
        <view class="modal-footer">
          <view class="modal-btn cancel" @tap="closeSleepModal">
            <text class="btn-text">取消</text>
          </view>
          <view class="modal-btn confirm" @tap="saveSleep">
            <text class="btn-text">保存</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 用户健康数据
const height = ref(170)
const weight = ref(65)
const steps = ref(8432)
const sleepHours = ref(7.5)

// 记录数据
const medicalRecords = ref([
  { id: 1, date: '2024-01-15', hospital: '市人民医院', diagnosis: '感冒' },
  { id: 2, date: '2024-02-20', hospital: '中医院', diagnosis: '体检' }
])

const medicineRecords = ref([
  { id: 1, name: '阿莫西林', dosage: '250mg', frequency: '每日3次' },
  { id: 2, name: '维生素C', dosage: '100mg', frequency: '每日1次' }
])

// 弹窗控制
const showHeightWeight = ref(false)
const showSteps = ref(false)
const showSleep = ref(false)

// 临时输入值
const tempHeight = ref('')
const tempWeight = ref('')
const tempSteps = ref('')
const tempSleepHours = ref('')

// 显示身高体重弹窗
const showHeightWeightModal = () => {
  tempHeight.value = height.value.toString()
  tempWeight.value = weight.value.toString()
  showHeightWeight.value = true
}

// 关闭身高体重弹窗
const closeHeightWeightModal = () => {
  showHeightWeight.value = false
}

// 保存身高体重
const saveHeightWeight = () => {
  if (tempHeight.value && tempWeight.value) {
    height.value = parseFloat(tempHeight.value)
    weight.value = parseFloat(tempWeight.value)
    wx.showToast({ title: '保存成功', icon: 'success' })
    closeHeightWeightModal()
  } else {
    wx.showToast({ title: '请输入完整信息', icon: 'none' })
  }
}

// 计算BMI
const calculateBMI = () => {
  const h = parseFloat(tempHeight.value) / 100
  const w = parseFloat(tempWeight.value)
  if (h && w) {
    const bmi = (w / (h * h)).toFixed(1)
    return bmi
  }
  return '--'
}

// 获取BMI状态
const getBMIStatus = () => {
  const bmi = parseFloat(calculateBMI())
  if (bmi < 18.5) return 'underweight'
  if (bmi < 24) return 'normal'
  if (bmi < 28) return 'overweight'
  return 'obese'
}

// 获取BMI状态文本
const getBMIStatusText = () => {
  const bmi = parseFloat(calculateBMI())
  if (bmi < 18.5) return '偏瘦'
  if (bmi < 24) return '正常'
  if (bmi < 28) return '偏胖'
  return '肥胖'
}

// 显示步数弹窗
const showStepsModal = () => {
  tempSteps.value = steps.value.toString()
  showSteps.value = true
}

// 关闭步数弹窗
const closeStepsModal = () => {
  showSteps.value = false
}

// 保存步数
const saveSteps = () => {
  if (tempSteps.value) {
    steps.value = parseInt(tempSteps.value)
    wx.showToast({ title: '保存成功', icon: 'success' })
    closeStepsModal()
  }
}

// 显示睡眠弹窗
const showSleepModal = () => {
  tempSleepHours.value = sleepHours.value.toString()
  showSleep.value = true
}

// 关闭睡眠弹窗
const closeSleepModal = () => {
  showSleep.value = false
}

// 保存睡眠时间
const saveSleep = () => {
  if (tempSleepHours.value) {
    sleepHours.value = parseFloat(tempSleepHours.value)
    wx.showToast({ title: '保存成功', icon: 'success' })
    closeSleepModal()
  }
}

// 导航功能
const goToMedicalRecords = () => {
  wx.navigateTo({ url: '/pages/medical-records/medical-records' })
}

const goToMedicineRecords = () => {
  wx.navigateTo({ url: '/pages/medicine-records/medicine-records' })
}

const goToHealthReports = () => {
  wx.navigateTo({ url: '/pages/analytics/analytics' })
}

const goToReminders = () => {
  wx.showToast({ title: '用药提醒功能', icon: 'none' })
}

const goToExport = () => {
  wx.showToast({ title: '数据导出功能', icon: 'none' })
}
</script>

<style scoped>
.profile-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 32rpx;
}

/* 用户信息卡片 */
.user-card {
  background: linear-gradient(135deg, #10b981, #3b82f6);
  padding: 48rpx 32rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-bottom: 32rpx;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4rpx solid rgba(255, 255, 255, 0.5);
}

.avatar-text {
  font-size: 64rpx;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.user-name {
  font-size: 36rpx;
  font-weight: 600;
  color: white;
  display: block;
}

.user-id {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
  display: block;
}

/* Removed settings button styles */

/* 区块样式 */
.section {
  margin-bottom: 32rpx;
}

.section-header {
  padding: 0 32rpx 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f2937;
  display: block;
}

/* 数据录入网格 */
.data-input-grid {
  padding: 0 32rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.input-card {
  background: white;
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}

.input-card:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.input-icon {
  font-size: 48rpx;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border-radius: 50%;
}

.input-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.input-label {
  font-size: 28rpx;
  color: #6b7280;
  display: block;
}

.input-value {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f2937;
  display: block;
}

.arrow {
  font-size: 48rpx;
  color: #d1d5db;
}

/* 菜单列表 */
.menu-list {
  background: white;
  border-radius: 16rpx;
  margin: 0 32rpx;
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 32rpx;
  border-bottom: 1rpx solid #f3f4f6;
  transition: background-color 0.2s;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background: #f9fafb;
}

.menu-icon-wrapper {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-icon-wrapper.blue {
  background: #dbeafe;
}

.menu-icon-wrapper.purple {
  background: #f3e8ff;
}

.menu-icon-wrapper.green {
  background: #dcfce7;
}

.menu-icon-wrapper.orange {
  background: #fed7aa;
}

.menu-icon-wrapper.yellow {
  background: #fef3c7;
}

.menu-icon-wrapper.red {
  background: #fee2e2;
}

.menu-icon {
  font-size: 40rpx;
}

.menu-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.menu-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #1f2937;
  display: block;
}

.menu-subtitle {
  font-size: 24rpx;
  color: #6b7280;
  display: block;
}

.menu-arrow {
  font-size: 48rpx;
  color: #d1d5db;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 32rpx;
}

.modal-content {
  background: white;
  border-radius: 24rpx;
  width: 100%;
  max-width: 600rpx;
  overflow: hidden;
}

.modal-header {
  padding: 32rpx;
  border-bottom: 1rpx solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f2937;
}

.modal-close {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
  font-size: 32rpx;
  color: #6b7280;
}

.modal-close:active {
  background: #f3f4f6;
}

.modal-body {
  padding: 32rpx;
}

.input-group {
  margin-bottom: 32rpx;
}

.input-label-text {
  font-size: 28rpx;
  color: #374151;
  display: block;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.modal-input {
  width: 90%;
  padding: 24rpx;
  border: 1rpx solid #d1d5db;
  border-radius: 12rpx;
  font-size: 28rpx;
  background: #f9fafb;
  box-sizing: border-box;
}

.bmi-info {
  background: #f0fdf4;
  padding: 24rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
  flex-wrap: wrap;
}

.bmi-label {
  font-size: 28rpx;
  color: #166534;
}

.bmi-value {
  font-size: 32rpx;
  font-weight: 600;
  color: #15803d;
}

.bmi-status {
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.bmi-status.underweight {
  background: #fef3c7;
  color: #92400e;
}

.bmi-status.normal {
  background: #dcfce7;
  color: #166534;
}

.bmi-status.overweight {
  background: #fed7aa;
  color: #9a3412;
}

.bmi-status.obese {
  background: #fee2e2;
  color: #991b1b;
}

.steps-tips,
.sleep-tips {
  background: #f0fdf4;
  padding: 16rpx 24rpx;
  border-radius: 12rpx;
  margin-top: 16rpx;
}

.tips-text {
  font-size: 24rpx;
  color: #166534;
  display: block;
}

.modal-footer {
  padding: 32rpx;
  border-top: 1rpx solid #e5e7eb;
  display: flex;
  gap: 16rpx;
}

.modal-btn {
  flex: 1;
  padding: 24rpx;
  border-radius: 12rpx;
  text-align: center;
  transition: all 0.2s;
}

.modal-btn.cancel {
  background: #f3f4f6;
}

.modal-btn.cancel:active {
  background: #e5e7eb;
}

.modal-btn.confirm {
  background: #3b82f6;
}

.modal-btn.confirm:active {
  background: #2563eb;
}

.btn-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #374151;
}

.modal-btn.confirm .btn-text {
  color: white;
}
</style>
